<html>
  <head>
    <title>Script interaction with CSS transforms</title>
    <style>
      html { background:white; }
     
      widget#stack
      {
        flow:stack;
        overflow:hidden;
        background-image:url(images/stretchable.png); 
        background-position:15px 15px 15px 15px; /*top right bottom left offsets*/
        background-repeat:expand stretch-top stretch-bottom stretch-middle; /* h-smile specific */
        border: none;
        padding: 14px;
        height:*;    
      }
      widget#stack > section 
      {
        border:2px solid brown;
        border-radius:10px;
        margin:10px;
        padding:10px;
        size:*;
        opacity:1;
        visibility:visible;
        transform:translate(0%,0dip);
        transition: transform cubic-out 0.5s, opacity linear 0.5s, visibility linear 0.5s;
      }

      widget#stack > section[slide=left] /* slide is on the left side */ 
      {
        opacity:0;
        visibility:hidden;
        transform:translate(-100%,0dip);
      }
      widget#stack > section[slide=right] /* slide is yet on the right side */ 
      {
        opacity:0;
        visibility:hidden;
        transform:translate(100%,0dip);
      }
      widget#stack > section[slide=current]
      {
        z-index:1; // it is always on top
        foreground-image:url(images/close.png);
        foreground-position:100% 0;
        foreground-repeat:no-repeat;
        foreground-clip: margin-box;
      }
       

    </style>

    <script type="text/tiscript">
    
    function wizard(stack, prevBtn, nextBtn)
    {
      function animationDone(evt)
      {
        if(evt.target === this) // only section animations
        {
          var idx = this.index;
          prevBtn.state.disabled = idx == 0; 
          nextBtn.state.disabled = idx == stack.length-1; 
          this.off(animationDone);
          return true;
        }
      }

      function showNext(direction) {
        prevBtn.state.disabled = true; 
        nextBtn.state.disabled = true; 

        var current = stack.$([slide=current]); 
        var index = current.index + direction; 
        if( index < 0 || index >= stack.length )
          return;
        
        var newCurrent = stack[index];

        for( var (idx, el) in stack ) {
          if(idx < index) el.attributes["slide"] = "left";
          else if(idx > index) el.attributes["slide"] = "right";
          else el.attributes["slide"] = "current";
        }
        //el.attributes["slide"] = direction; // reset to initial animation state.
        newCurrent.on("animationend",animationDone);
      }
      
      prevBtn.on("click", function() { showNext(-1); return true; });
      nextBtn.on("click", function() { showNext(+1); return true; });

      prevBtn.state.disabled = true; 
      nextBtn.state.disabled = stack.length == 0; 
      
      // setup intitial position 
      for(var (index,child) in stack)
        child.attributes["slide"] = index ? "right" : "current";

    }  
    
    wizard($(widget#stack),$(button#prev),$(button#next));
    
    </script>
</head>

<body>
  <p>Demo of <b>HTML</b> rendering in H-SMILE v.5 core using <i>Direct2D/DirectWrite</i>.</p> 
  <div><button #prev>&lt;</button> <button #next>&gt;</button></div>
  <widget #stack >
    <section style="background:DarkSalmon">First <a>Stack</a> element</section>
    <section style="background:GoldenRod">Second <a>Stack</a> element</section>
    <section style="background:MediumPurple">Third <a>Stack</a> element</section>
    <section style="background:PaleVioletRed">Fourth <a>Stack</a> element</section>
  </widget>
</body>
</html>
